<!-- <link rel="stylesheet" href="css/style.css"/> -->
<style>
.wrapper_box{width:800px;background-color:#f3f7fb;float:left;margin:0px auto;}
.title_box{border:1px solid #E5E5E5;height:120px;background-color:#FFF;}
.title{height:45px;line-height:45px;padding-left:20px;border-bottom:3px solid #0697D9;font-size:16px;}
.set_price{table-layout:fixed;width:100%;border:1px solid #E5E5E5;margin-top:10px;line-height:35px;background-color:#FFF;}
.set_price th{font-weight:normal;text-align:left;padding-left:20px;border-right:1px solid #E5E5E5;background-color:#EFEFEF;}
.set_price .bacolor_a{background-color:#FFF;}
.set_price td{border-top:1px solid #E5E5E5;border-right:1px solid #E5E5E5;padding-left:20px;line-height:40px;}
.set_price .width_a{width:40px;font-size:30px;color:#44BA47;padding-left:0;text-align:center;font-weight:bold;}
.settlement{width:50px;height:25px;  line-height: 25px;border:1px solid #E5E5E5;margin-left:46px;text-align:center;}
.mleft_a{margin-left:10px;}
.set_price .bright_a{border-right:0 none;border-bottom:1px solid #E5E5E5;}
.page_num{cursor:pointer;padding:20px 0;border:1px solid #E5E5E5;text-align:right;border-top:0 none;padding-right:35px;background-color:#FFF;}
.page_num li{display:inline-block;margin-right:5px;}
.page_num .border_none{border:0 none;}
.btn_box{text-align:right;padding:20px 0 50px 0;}
.btn_save{width:120px;height:35px;line-height:35px;color:#FFF;background-color:#0697D9;border:0 none;margin-right:10px;}
.on{background-color:#0697D9;color:#FFF;}
.set_price .active{background-color:#0697D9;color:#FFF;}
.set_price .active_a{background-color:#D1E9F1;color:#FFF;}
.page_num span{display:inline-block;padding:2px 6px;border:1px solid #E5E5E5;}
.page_num em{display:inline-block;padding:2px 6px;border:1px solid #E5E5E5;}
.page_num span:hover{background-color:#0697D9;color:#FFF;}
</style>
<div class="wrapper_box">
		<div class="title_box">
			<div class="title">分销价格配置</div>
		</div>
		<table class="set_price" border="0" cellpadding="0" cellspacing="0">
			<thead class="thead">
			 <tr>
				<th class="bacolor_a" rowspan="2">产品名称（单位：元）</th>
				<th class="bacolor_a width_a pre_col" rowspan="3">&lt;</th>
				<th>这种票 1</th>
				<th>&这种票;2</th>
				<th>&这种票;3</th>
				<th>&这种票;3</th>
				<th class="bacolor_a width_a bright_a next_col" rowspan="3">&gt;</th>
			 </tr>
			 <tr>
				<th>供货价： 551</th>
				<th>供货价： 552</th>
				<th>供货价： 553</th>
				<th>供货价： 553</th>
			  </tr>
			  <tr class="input_box">
				<th>分销商账号</th>
				<th>结算价<input class="settlement mleft_a" type="text" value="651"></th>
				<th>结算价<input class="settlement mleft_a" type="text" value="652"></th>
				<th>结算价<input class="settlement mleft_a" type="text" value="653"></th>
				<th>结算价<input class="settlement mleft_a" type="text" value="654"></th>
			  </tr>
			</thead>
			<tbody class="tbody">
			  <tr>
				<td colspan="2">天地会（ID1111）</td>
				<td><input class="settlement" type="text" value="651"></td>
				<td><input class="settlement" type="text" value="652"></td>
				<td><input class="settlement" type="text" value="653"></td>
				<td><input class="settlement" type="text" value="654"></td>
			  </tr>
			    <tr>
				<td colspan="2">天地会（ID1111）</td>
				<td><input class="settlement" type="text" value="651"></td>
				<td><input class="settlement" type="text" value="652"></td>
				<td><input class="settlement" type="text" value="653"></td>
				<td><input class="settlement" type="text" value="654"></td>
			  </tr>
			
			
			
			</tbody> 
		</table>
		<ul class="page_num">
			<li><span>首页</span></li>
			<li><em>&lt;</em></li>
			<li><span class="border_none on">1</span></li>
			<li><span class="border_none">2</span></li>
			<li><span class="border_none">3</span></li>
			<li><span class="border_none">4</span></li>
			<li class="border_none">...</li>
			<li><em>&gt;</em></li>
			<li><span>末页</span></li>
			<li class="border_none">共3页18条信息</li>
		</ul>
		<div class="btn_box"><button class="btn_save">保存</button></div>
		<script>
		$(document).ready(function(){
			$(".set_price tr").each(function(){
				$(".thead").find("tr").eq(0).find("th").eq(2).addClass("active");
				$(".thead").find("tr").eq(1).find("th").eq(0).addClass("active");
				$(".thead").find("tr").eq(2).find("th").eq(1).addClass("active");
				$(this).find("td").eq(1).addClass("active_a");
			});
			$(".page_num span").click(function(){
				 //alert( $(this).index() );
				$(this).addClass("on");
				$(this).parents().siblings().children().removeClass("on");
			});
			$(".input_box th").each(function(){	
				//var i=$(".input_box").find("th").length;
				var j=$(this).index();
				$(".input_box").find("input").focus(function(){
					$(this).css("color","pink");
						$(this).keyup(function(){
							$(".set_price tr").each(function(){	
								var a=$(".input_box").find("th").eq(j).find("input").val();
								$(this).find("td").eq(j).find("input").val(a);
							});	
						});
				});
			});
			/*鼠标点击改变背景颜色*/
			$(".tbody td").click(function(){
				var i=$(this).index();
				//alert(i);
				if(i>0){
					$(".set_price th").removeClass("active");
					//alert("aa");
					$(".set_price td").removeClass("active_a");
					$(".set_price tr").each(function(){
						$(".thead").find("tr").eq(0).find("th").eq(i+1).addClass("active");
						$(".thead").find("tr").eq(1).find("th").eq(i-1).addClass("active");
						$(".thead").find("tr").eq(2).find("th").eq(i).addClass("active");
						//$(this).parents().find("tr").eq(0).find("th").eq(i).removeClass("active");
						$(this).find("td").eq(i).addClass("active_a");	
					});
				}
			});
			$(".thead th").click(function(){
				var i=$(this).index();
				var j=$(this).parents("tr").index();
				var k=$(".input_box").find("th").length;
					k=k+1;
				//alert(i+"  j:"+j+"kkk"+k);
				if((i==0&&j==1)||(i==1&&j==2)){
					$(".set_price th").removeClass("active");
					$(".set_price td").removeClass("active_a");
					$(".thead").find("tr").eq(0).find("th").eq(2).addClass("active");
					$(".thead").find("tr").eq(1).find("th").eq(0).addClass("active");
					$(".thead").find("tr").eq(2).find("th").eq(1).addClass("active");
					$(".set_price tr").each(function(){
						$(this).find("td").eq(1).addClass("active_a");
					});
				}
				if(i==1&&j==1){
					$(".set_price th").removeClass("active");
					$(".set_price td").removeClass("active_a");
					$(".thead").find("tr").eq(0).find("th").eq(3).addClass("active");
					$(".thead").find("tr").eq(1).find("th").eq(1).addClass("active");
					$(".thead").find("tr").eq(2).find("th").eq(2).addClass("active");
					$(".set_price tr").each(function(){
						$(this).find("td").eq(2).addClass("active_a");
					});
				}
			if(i>1&&j==0&&i<k){
					$(".set_price th").removeClass("active");
					$(".set_price td").removeClass("active_a");
					$(".thead").find("tr").eq(0).find("th").eq(i).addClass("active");
					$(".thead").find("tr").eq(1).find("th").eq(i-2).addClass("active");
					$(".thead").find("tr").eq(2).find("th").eq(i-1).addClass("active");
					$(".set_price tr").each(function(){
						$(this).find("td").eq(i-1).addClass("active_a");
					});
				}
				if(i>1&&j==1&&i<k){
					$(".set_price th").removeClass("active");
					$(".set_price td").removeClass("active_a");
					$(".thead").find("tr").eq(0).find("th").eq(i+2).addClass("active");
					$(".thead").find("tr").eq(1).find("th").eq(i).addClass("active");
					$(".thead").find("tr").eq(2).find("th").eq(i+1).addClass("active");
					$(".set_price tr").each(function(){
						$(this).find("td").eq(i+1).addClass("active_a");
					});
				}
				if(i>1&&j==2&&i<k){
					$(".set_price th").removeClass("active");
					$(".set_price td").removeClass("active_a");
					$(".thead").find("tr").eq(0).find("th").eq(i+1).addClass("active");
					$(".thead").find("tr").eq(1).find("th").eq(i-1).addClass("active");
					$(".thead").find("tr").eq(2).find("th").eq(i).addClass("active");
					$(".set_price tr").each(function(){
						$(this).find("td").eq(i).addClass("active_a");
					});
				}
				
				
			});
			/*鼠标点击改变背景颜色 end*/
			
			/*初始化表格
				var m=$(".tbody").find("tr").length;
				$(".tbody tr").each(function(){
					
					$(this).find("td").hide();
					$(this).find("td").eq(0).show();
					$(this).find("td").eq(1).show();
					$(this).find("td").eq(2).show();
					$(this).find("td").eq(3).show();
					$(this).find("td").eq(m).show();
				//	$(this).find("td").eq(1).hide();
					});
				$(".thead th").each(function(){
					//$(this).find("th").hide();
					$(this).find("th").hide();
					var i=$(this).index();
					var j=$(this).parents("tr").index();
					$(".thead").find("tr").eq(0).find("th").eq(5).hide();
					$(".thead").find("tr").eq(1).find("th").eq(3).hide();
					$(".thead").find("tr").eq(2).find("th").eq(4).hide();
				});
				
			
			
			/*下一列
				
				
			
			$(".tbody tr").find("td").eq(3).addClass("aa");
			$(".next_col").click(function(){
				var a=$(".aa").index();
				alert(a);
				$(".tbody tr").each(function(){
					$(this).find("td").eq(a+1).show();
					$(this).find("td").eq(a-2).hide();
					
				});
				$(".thead th").each(function(){
					$(".thead").find("tr").eq(0).find("th").eq(a-1).hide();
					$(".thead").find("tr").eq(1).find("th").eq(a-3).hide();
					$(".thead").find("tr").eq(2).find("th").eq(a-2).hide();
					$(".thead").find("tr").eq(0).find("th").eq(5).show();
					$(".thead").find("tr").eq(1).find("th").eq(3).show();
					$(".thead").find("tr").eq(2).find("th").eq(4).show();
				
				});
		
			
			});*/
				
	});	
	
		</script>
	</div>
